<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的课程</title>
    <link rel="icon" type="image/x-icon" href="/img/favicon.jpg"/>
</head>
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Input.css">
<!-- jquery-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="/css/pure/pure-min.css">
<script src="/js/index.js"></script>
<style>
    body{
        text-align: center;
        overflow-y: auto;
        overflow-x: auto;
        background-color: lightcyan;
    }
    a:link{text-decoration:none;   /* 指正常的未被访问过的链接*/
    }
    a{
        color: gray;
    }
    .nav{
        width: 100%;height: 10%;
        background-color: white;
        display: flex;
        justify-content: center;
        margin: 1px auto;
        text-align: center;
    }
    .hider{
        margin-left: 5%;
    }
    .box{
        width: 80%;height: 15%;
        background-color: white;
        margin: 1px auto;
    }
    .lesson_box{
        width: 80%;height: 70%;
        background-color: white;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 1px auto;
    }
    .lesson{
        width: calc(25% - 2px);
        height: calc(50% - 5px);
        background-color: whitesmoke;
        margin-left: 2px;
        margin-top: 5px;
        /*background-image: url("/img/lo.gif");*/
    }
    .lesson_img{
        width: calc(100%);height:calc(60%)
    }
    .lesson_p{
        height: calc(10%);
        font-size: 10px;
        margin-top: 0px;
        color: gray;
    }
    .p_button{
        margin-left: 10px;
    }
</style>
<body>

<!--导航栏-->
<div th:replace="common :: navbar"></div>

<!--中部统计数据-->
<div th:replace="common :: boxbar"></div>
<p style="margin-left: 10%;text-align: left;color: grey">
    <a href="/student/myLearn" style="color: #2a80eb" class="p_button">我的课程</a>
<!--    <a href="/student/myLearn"  class="p_button">进行中</a>-->
<!--    <a href="/student/myLearn"  class="p_button">已完成</a>-->
    <a th:if="${session.user.role == 3 } and  ${user.classId == null}"
       class="pure-button" href="/myClass" style="color: #f59b00">加入班级
    </a>

</p>
<span th:if=" ${user.classId == null}" style="color: red">还未加入班级，请先加入班级！加入后，请重新登录。</span>

<section th:if=" ${user.classId != null}"  class="lesson_box" style="justify-content: left">
    <div  th:each="info,infoStat : ${page.list}"  class="lesson">
        <a th:href="@{/student/lessonProcessInfo(id=${info.classLessonId})}"><img class="lesson_img"  onerror="this.src='/img/default.jfif'"   src="/img/default.png"></a>
        <p class="lesson_p" th:text="${info.name}" style="font-size: 15px;color: black"></p>
        (
        <a class="lesson_p" th:if="${info.status==0}" style="color: #cad2d3">未开始</a>
        <a class="lesson_p" th:if="${info.status==1}" style="color: #f59b00">进行中</a>
        <a class="lesson_p" th:if="${info.status==2}" style="color: gray">已结束</a>
        )
        <p class="lesson_p" th:text="${info.remark}"></p>

    </div>
</section>

<!-- 底部分页 -->
<form  th:if=" ${user.classId != null}"  id="form" style="display: flex;justify-content: center" action="/lesson" type="POST">
    当前页  （<a  th:text="${page.currentPage+1}"  />）
    <a style="color: #2a80eb" onclick="loadPage(- 1)" th:if="${page.currentPage > 0}">上一页</a>
    <a style="color: #2a80eb"  onclick="loadPage(1)" th:if = "${page.currentPage < (page.totalPage - 1)}">下一页</a>
    共      <a style="color: #f59b00"  th:text="${page.total}" />条|
    <a style="color: #f59b00"  th:text="${page.totalPage}" />页
    每页    <a style="color: #f59b00"  th:text="${page.pageSize}" />条
    <input type="hidden" name="pageSize" th:value="${page.pageSize}" />
    <input name="currentPage" id="currentPage" type="hidden" th:value="${page.currentPage}"  />
    <input name="flag" id="flag" type="hidden" value="0"   />
</form>


<script>

</script>
</body>
</html>